<template>
  <div>
    <div>
      <!-- {{ searchs }} -->

      <FilterForList v-if="searchs" v-model="searchResult" :options="searchs" />

      <ListPage
        :data.sync="dataList"
        :to-research.sync="toResearch"
        :config="config"
        :model="model"
      />
    </div>
  </div>
</template>

<script>
import ListPage from '@/components/ListPage'
import objectMixin from './objectMixin'
import FilterForList from '@/components/ListPage/FilterForList'

import { searchToDomainList } from '@/api/utils'

export default {
  name: 'ObjectListPage',
  components: { ListPage, FilterForList },

  mixins: [objectMixin],

  data() {
    return {
      isInitedForSearchResult: false,

      searchResult: [],
      toResearch: false,

      model: '',
      Model: undefined,
      dataList: [],
      query: { domain: {}, fields: {}, order: undefined }
    }
  },
  computed: {
    dataCount() {
      return this.$store.state.object.dataCount
    },
    searchs() {
      const propForList = this.config.propForList || {}
      const searchs = propForList.searchs
      // console.log('getFilter, ', filter)
      return searchs
    },

    domain2() {
      //

      return this.getDomain2(this.searchResult, this.searchs)
    }
  },

  watch: {
    domain2: {
      handler(newVal, oldVal) {
        // console.log('watch,domain2, ', newVal, oldVal)
        this.toResearch = true
      },
      deep: true,
      immediate: true
    }
  },

  async created() {
    // console.log('Model,', model, Model)

    this.init_header()
    this.init_config()
    this.init_query()

    await this.init_count()
  },

  methods: {
    getDomain2(searchResult, searchs) {
      // console.log('getDomain2, searchs, ', searchs)
      return searchToDomainList(searchResult, searchs)
    },

    init_header() {
      // header title
      // const model = this.model
      const Model = this.Model

      this.$store.dispatch('header/setTitle', Model.metadata.description)

      // header setRight

      // console.log('list, Model', Model)
      let header_right = {}
      if (Model.metadata.actions.create) {
        header_right = {
          path: {
            path: this.config.path.form,
            query: { model: this.model }
          },
          icon: 'plus'
        }
      } else {
        header_right = undefined
      }

      this.$store.dispatch('header/setRight', header_right)
    },

    init_query() {
      const fields = this.get_fieldsForSearch()
      const domain = this.get_domainForSearch()
      const order = this.get_orderForSearch()

      if (!this.isInitedForSearchResult) {
        const filter = this.get_filterForSearch()
        this.searchResult = filter
        this.isInitedForSearchResult = true
      }

      this.query = { domain2: this.domain2, domain, fields, order }
      // console.log('list, this.query,', this.query, this.searchResult)
    },

    async init_count() {
      //
      const model = this.model
      const { domain, domain2 } = this.query
      await this.$store.dispatch('object/search_count', {
        _model: model,
        domain,
        domain2
      })
      // console.log('init_count', this.dataCount)
    },

    async list_load_data({ offset, limit }) {
      const model = this.model
      // data
      this.init_query()
      const { domain, domain2, fields, order } = this.query
      // console.log('list_load_data', domain2)
      const res = await this.$store.dispatch('object/search', {
        _model: model,
        domain,
        domain2,
        fields: { display_name: null, ...fields },
        limit,
        offset,
        order
      })
      // this.dataList = [...this.dataList, ...res]
      // console.log('DataList,', this.dataList)
      return res
    }
  }
}
</script>

<style type="text/css"></style>
